<!DOCTYPE html>
<html>
<head>
    <title>Camera Control</title>
</head>
<body>
<h1>Camera Control</h1>
<button onclick="sendMessage('w')">UP</button>
<button onclick="sendMessage('s')">DOWN</button>
<button onclick="sendMessage('a')">LEFT</button>
<button onclick="sendMessage('d')">RIGHT</button>
<button onclick="sendMessage('q')">UP LEFT</button>
<button onclick="sendMessage('e')">UP RIGHT</button>
<button onclick="sendMessage('z')">DOWN LEFT</button>
<button onclick="sendMessage('c')">DOWN RIGHT</button>

<script>
    const socket = new WebSocket("ws://192.168.1.40:8086");

    socket.onopen = function(event) {
        console.log('WebSocket connection opened');
    };

    function sendMessage(message) {
        if (socket.readyState === WebSocket.OPEN) {
            console.log('Sending message: ' + message);
            socket.send(message);
        } else {
            console.error('WebSocket connection is not open');
        }
    }

    socket.onmessage = function(event) {
        console.log('Received message: ' + event.data);
    };

    socket.onclose = function(event) {
        console.log('WebSocket connection closed');
    };

    socket.onerror = function(event) {
        console.error('WebSocket error: ' + event);
    };
</script>
</body>
</html>
